<template>
  <div class="banner">
    <div class="banner2">
      <div style="float:left;">
        <el-carousel height="400px">
          <el-carousel-item v-for="(item,index) in banner_list" :key="index">
            <div v-if="item.link.startsWith('http')">
              <a :href="item.link"><img :src="item.image" :alt="item.title"></a>
            </div>
            <div v-else>
              <router-link :to="item.link"><img :src="item.image" :alt="item.title"></router-link>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="in_button">
        <div class="state">
          <p style="line-height: 10px">开馆时间：</p>
          <p style="line-height: 10px">8：00-22：00</p>
          <p><span style="font-size: 20px;font-weight: bold">开馆</span>
            <el-switch
                v-model="value1"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled>
            </el-switch>
          </p>
        </div>
        <div class="inorout">
          <p><el-button type="primary" @click="inswim"  round>刷卡入馆</el-button></p><br>
          <p><el-button type="danger" @click="outswim" round>刷卡出馆</el-button></p>
          <br><br>
          <p style="color: red">当前人数:{{peoplenum}}</p>
          <p style="color: red">今日人数:{{peopletotal}}</p>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      banner_list: [],
      value1: true,
      peoplenum:'',
      peopletotal:'',
    }
  },
  methods:{
    inswim(){
      if (this.value1==true){
        this.$http.post(this.$settings.base_url+'home/swimnum/').then(res=>{
        if (res.data.code==100){
            this.$http.get(this.$settings.base_url + 'home/swimnum/').then(res=>{
            this.peoplenum=res.data[0]['num']
            this.peopletotal=res.data[0]['total']
            this.$message({
            message: '入馆成功',
            type: 'success',
            duration: 800
          })
          })
        }else{
          this.$message({
            message:'欢迎光临！',
            type: 'warning',
            duration: 800
          })
        }
      })
      }else {
        this.$message({
            message:'闭馆中！',
            type: 'warning',
            duration: 800
          })
      }

    },
    outswim(){
      this.$http.post(this.$settings.base_url+'home/swimnumcut/').then(res=>{
        if (res.data.code==100){
            this.$http.get(this.$settings.base_url + 'home/swimnum/').then(res=>{
            this.peoplenum=res.data[0]['num']
            this.peopletotal=res.data[0]['total']
            this.$message({
            message: '欢迎再来！',
            type: 'success',
            duration: 800
          })
          })
        }else{
          this.$message({
            message: res.data.msg,
            type: 'warning',
            duration: 800
          })
        }
      })
    }
  },
  created() {
    this.$http.get(this.$settings.base_url + 'home/banner/').then(res => {
      this.banner_list = res.data
    });
    this.$http.get(this.$settings.base_url + 'home/swimnum/').then(res=>{
      this.peoplenum=res.data[0]['num']
      this.peopletotal=res.data[0]['total']
    });
    this.$http.get(this.$settings.base_url+'home/swiminfo').then(res=>{
      this.value1=res.data[0]['state']
    })
  }
}
</script>

<style scoped>
.el-carousel {
  width: 1000px;
  margin: 0 auto;

}

.banner2 {
  width: 1200px;
  margin: 0 auto;
}

.el-carousel__item {
  height: 400px;
  width: 1000px;
  margin: 0 auto;
  /*float: left;*/
}

.in_button {
  height: 400px;
  width: 200px;
  float: left;
}

.el-carousel__item img {
  height: 400px;
  width: 1000px;
  /*margin-left: calc(50% - 1920px / 2);*/
}

.state {
  height: 100px;
  text-align: center;
  padding-top: 15px;
  background-color: #c7cdde;

}
.inorout{
  height: 300px;
  text-align: center;
  padding-top: 55px;
  background-color: antiquewhite;
}
</style>